<template>
  <div class="my-secret-key">
    <el-row>
      <el-col :span="24">
        <div class="title">
          <span class="title-line"></span>
          <span class="title-name">My Secret Key</span>
          <span class="title-line"></span>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="content">
          <router-link to="AccessProcess">
            <el-button type="primary">Create Secret Key</el-button>
          </router-link>
          <el-table
            class="table"
            :data="tableData"
            stripe
            style="width: 100%;margin-top: 20px">
            <el-table-column
              prop="date"
              label="Secret Key"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="Description"
              width="180">
            </el-table-column>
            <el-table-column
              prop="address"
              label="Secret Key Status">
            </el-table-column>
            <el-table-column
              prop="address"
              label="Create Time">
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  }
</script>

<style lang="scss" scoped>
  .my-secret-key {
    padding: 0 50px;
    background: #f6f7fb;
  }

  .title {
    margin: 20px 0;
    text-align: center;
    .title-line {
      display: inline-block;
      margin: 0 10px;
      width: 50px;
      height: 4px;
      background: #0090e9;
    }
    .title-name {
      font-weight: bold;
      font-size: 30px;
      color: #000;
      vertical-align: middle;
    }
  }

  .content {
    background: #fff;
    box-shadow: 0 2px 10px 0 rgba(226, 224, 234, .6);
    border-radius: 6px;
    padding: 20px;
  }
</style>
